<template>
    <div class="drugContainer">

        <div class="title">药品管理</div>

        <!-- search bar 组件 -->
        <div class="searchBar">
            <SearchBar />
        </div>


        <div class="subTitle">
            <div class="pic">
                <img src="../../../../public/商品分类列表.svg" alt="">
                数据列表
            </div>
            <el-button type="primary" @click="drawer = true">新增药品</el-button>

            <!-- 新增 -->
            <el-drawer v-model="drawer" title="新增编辑药品" :direction="direction" before-close="" size="43%">
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                    :size="formSize" status-icon>
                    <el-form-item label="药品编号" prop="number">
                        <el-input v-model="ruleForm.name" />
                    </el-form-item>
                    <el-form-item label="药品名称" prop="name">
                        <el-input v-model="ruleForm.name" />
                    </el-form-item>

                    <el-form-item label="列表图" prop="count">
                        <el-select-v2 v-model="ruleForm.count" placeholder="Activity count" :options="options" />
                    </el-form-item>
                    <el-form-item label="轮播图" prop="count">
                        <el-select-v2 v-model="ruleForm.count" placeholder="Activity count" :options="options" />
                    </el-form-item>

                    <el-form-item label="是否推荐" prop="resource">
                        <el-radio-group v-model="ruleForm.resource">
                            <el-radio label="Sponsorship" />
                            <el-radio label="Venue" />
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="药品分类" prop="region">
                        <el-select v-model="ruleForm.region" placeholder="Activity zone">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                        <el-select v-model="ruleForm.region" placeholder="Activity zone">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="症状" prop="region">
                        <el-select v-model="ruleForm.region" placeholder="Activity zone">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                        <el-select v-model="ruleForm.region" placeholder="Activity zone">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="规格" prop="number">
                        <el-input v-model="ruleForm.name" />
                    </el-form-item>
                    <el-form-item label="价格" prop="name">
                        <el-input v-model="ruleForm.name" />
                    </el-form-item>
                    <el-form-item label="库存" prop="number">
                        <el-input v-model="ruleForm.name" />
                    </el-form-item>
                    <el-form-item label="库存警告" prop="name">
                        <el-input v-model="ruleForm.name" />
                    </el-form-item>

                    <el-form-item label="免运费" prop="resource">
                        <el-radio-group v-model="ruleForm.resource">
                            <el-radio label="Sponsorship" />
                            <el-radio label="Venue" />
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否处方药" prop="resource">
                        <el-radio-group v-model="ruleForm.resource">
                            <el-radio label="Sponsorship" />
                            <el-radio label="Venue" />
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="批准文号" prop="name">
                        <el-input v-model="ruleForm.name" />
                    </el-form-item>
                    <el-form-item label="主治功能" prop="number">
                        <el-input v-model="ruleForm.name" />
                    </el-form-item>
                    <el-form-item label="用法用量" prop="name">
                        <el-input v-model="ruleForm.name" />
                    </el-form-item>

                    <el-form-item label="说明书" prop="name">
                        <el-input v-model="ruleForm.name" />
                    </el-form-item>

                    <el-form-item label="药企" prop="name">
                        <el-input v-model="ruleForm.name" />
                    </el-form-item>

                    <el-form-item label="上架" prop="onSale">
                        <!-- <el-switch v-model="ruleForm.onSale" /> -->
                        <el-switch v-model="ruleForm.onSale" />
                    </el-form-item>

                    <el-form-item label="详细介绍" prop="desc">
                        <div style="border: 1px solid #ccc">
                            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef"
                                :defaultConfig="toolbarConfig" mode="default" />
                            <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml"
                                :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" />
                        </div>

                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">
                            提交
                        </el-button>
                        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-drawer>




        </div>
        <!-- table -->
        <el-table ref="multipleTableRef" :data="cates" style="width: 100%" @selection-change="handleSelectionChange" border>
            <el-table-column type="selection" width="55" />
            <el-table-column property="name" label="药品名称 " />

            <el-table-column property="thumb" label="列表图" show-overflow-tooltip sortable>
                <template #default="{ row }">
                    <div>
                        <img :src="row.thumb" width="50" alt="">
                    </div>
                </template>
            </el-table-column>

            <el-table-column property="price" label="价格" show-overflow-tooltip sortable />

            <el-table-column property="onSale" label="上下架" show-overflow-tooltip sortable>
                <template #default="{ row }">
                    <div>
                        <el-switch v-model="row.onSale" inline-prompt active-text="在售" inactive-text="下架" />
                        <!-- @change="switchonsale(row.id, row.onsale)" -->
                    </div>
                </template>
            </el-table-column>

            <el-table-column property="prescription" label="是否为处方" show-overflow-tooltip sortable min-width="105" />
            <el-table-column property="checkStatus" label="审核状态" show-overflow-tooltip sortable min-width="90" />
            <el-table-column property="drugNumber" label="库存" show-overflow-tooltip sortable />

            <el-table-column label="时间" sortable>
                <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>

            <!-- 编辑 删除 -->
            <el-table-column property="actions" label="操作" show-overflow-tooltip min-width="150">
                <!-- table子项插槽 用以获取整行的数据 -->
                <template #default="{ row }">

                    <!-- 编辑弹窗 -->
                    <el-button type="primary" @click="drawer = true">编辑</el-button>


                    <!-- popconfirm 插槽 包裹需要用到 确认框的 按钮 @confirm确认后的回调 -->
                    <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="不了，谢谢" :icon="InfoFilled"
                        icon-color="#626AEF" title="该操作会彻底删除该分类，确定吗？" @confirm="delDrugCate(row.id)">
                        <!-- popconfirm 插槽 包裹需要用到 确认框的 按钮 -->
                        <template #reference>
                            <el-button type="danger">删除</el-button>
                        </template>

                    </el-popconfirm>
                </template>

            </el-table-column>


        </el-table>
        <div style="margin-top: 20px">
            <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])">Toggle selection status of second and third
            rows</el-button> -->
            <el-button @click="toggleSelection()" type="primary">清除全选</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>

import { onMounted, onBeforeUnmount, shallowRef } from 'vue';
import SearchBar from '@/components/SearchBar.vue';
import { reactive, ref } from 'vue'
import { ElTable, ElMessage } from 'element-plus'
import { getDrugManaLists, deleteDrugCate, postAddDrugICate, putDrugCate } from '../../../api/cate'
import { InfoFilled } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import type { FormInstance, FormRules } from 'element-plus'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'



// 获取药品审核列表
const cates = ref([]);
const fetchDrugManaLists = () => {
    getDrugManaLists().then(res => {
        console.log(res.data);
        if (res.data.code === 200) {
            cates.value = res.data.data
        }

    })
};
onMounted(() => {
    fetchDrugManaLists()
});



const router = useRouter()

// 删除 
const delDrugCate = (id: any) => {
    deleteDrugCate(id).then(res => {
        console.log(res.data);
        if (res.data.code === 200) {
            ElMessage({
                message: res.data.msg,
                type: 'success',
                duration: 700,
                onClose: () => {
                    router.go(0)
                }
            })
        }
    })
}


// 新增 抽屉弹窗

const drawer = ref(false)
const direction = ref('rtl')


// 表单中 富文本相关
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('<p>hello</p>')
const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' }

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}


// 新增表单相关

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    name: 'Hello',
    region: '',
    count: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
    onSale: true
})

const rules = reactive<FormRules>({
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    region: [
        {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change',
        },
    ],
    count: [
        {
            required: true,
            message: 'Please select Activity count',
            trigger: 'change',
        },
    ],
    date1: [
        {
            type: 'date',
            required: true,
            message: 'Please pick a date',
            trigger: 'change',
        },
    ],
    date2: [
        {
            type: 'date',
            required: true,
            message: 'Please pick a time',
            trigger: 'change',
        },
    ],
    type: [
        {
            type: 'array',
            required: true,
            message: 'Please select at least one activity type',
            trigger: 'change',
        },
    ],
    resource: [
        {
            required: true,
            message: 'Please select activity resource',
            trigger: 'change',
        },
    ],
    desc: [
        { required: true, message: 'Please input activity form', trigger: 'blur' },
    ],
})

// 应当携带参数 新增请求
const submitForm = async (formEl: FormInstance | undefined) => {
    putDrugCate().then(res => {
        console.log(res.data);
        if (res.data.code === 200) {
            ElMessage({
                message: res.data.msg,
                type: 'success',
                duration: 700,
                onClose: () => {
                    router.go(0)
                }
            })
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {

}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))






// 表格相关
interface User {
    date: string
    name: string
    grade: string,
    status: string,
    desc: string,
    roleUpload: string
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const toggleSelection = (rows?: User[]) => {
    if (rows) {
        rows.forEach((row) => {
            // TODO: improvement typing when refactor table
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-expect-error
            multipleTableRef.value!.toggleRowSelection(row, undefined)
        })
    } else {
        multipleTableRef.value!.clearSelection()
    }
}
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}


</script>

<style lang="scss" scoped>
.drugContainer {
    padding-top: 15px;
    padding-left: 15px;
}

.title {
    padding-bottom: 15px;
    padding-top: 3px;

    font-size: 30px;
    font-weight: bold;

}

.subTitle {
    margin: 0 0 20px;
    display: flex;
    justify-content: space-between;
    background-color: #F2F2F2;
    height: 45px;


    .pic {
        display: flex;
        align-items: center;

        img {
            width: 25px;
            height: 25px;
            padding-right: 10px;
        }
    }

    .el-button {
        margin-right: 140px;
        margin-top: 7px;

        border-color: red;
        background-color: #fff;
        color: black;
    }
}
</style>
